<template>
  <div style="width: 100%; height: 500px; background-color: azure">
    <div id="chart" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import router from '@/router';
import { ref, onMounted } from 'vue';
const wordList = ref([
  { name: '侏罗纪世界3', value: 1400 },
  { name: '人生大事', value: 2400 },
  { name: '暗恋.橘生淮南', value: 700 },
  { name: '你是我的春天', value: 300 },
  { name: '坏蛋联盟', value: 100 },
  { name: '长津湖', value: 2400 },
]);
const initchart = () => {
  let myChart = echarts.init(document.querySelector('#chart'));
  function eConsole(param) {
    sessionStorage.setItem('movieInfo', JSON.stringify(param.data.name));
    router.push('/movieInfo');
  }
  myChart.on('click', eConsole);
  myChart.setOption({
    series: [
      {
        type: 'wordCloud',
        //用来调整词之间的距离
        gridSize: 10,
        //用来调整字的大小范围
        // Text size range which the value in data will be mapped to.
        // Default to have minimum 12px and maximum 60px size.
        sizeRange: [12, 30],
        // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
        //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
        rotationRange: [-45, 0, 45, 90],
        // rotationRange: [ 0,90],
        //rotationRange: [0, 0],
        shape: 'circle',
        drawOutOfBound: false,
        //随机生成字体颜色
        // maskImage: maskImage,
        textStyle: {
          color: function () {
            return (
              'rgb(' +
              Math.round(Math.random() * 255) +
              ', ' +
              Math.round(Math.random() * 255) +
              ', ' +
              Math.round(Math.random() * 255) +
              ')'
            );
          },
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textStyle: {
              textShadowBlur: 10,
              textShadowColor: '#333',
            },
          },
        },
        //位置相关设置
        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
        // Default to be put in the center and has 75% x 80% size.
        left: 'center',
        top: 'center',
        right: null,
        bottom: null,
        width: '200%',
        height: '200%',
        //数据
        data: wordList.value,
      },
    ],
  });
};

onMounted(() => {
  initchart();
});
</script>
